<!DOCTYPE html>
<html>
<head>
  <script>
      var source;
      var request;

      function playVideo()
      {
          request = new XMLHttpRequest();
          request.responseType = 'arraybuffer';
          request.open('GET', 'test-mse.mp4', true);
          request.addEventListener('load', load);
          request.send();
      }

      function load(event)
      {
          source = new MediaSource();
          source.addEventListener('sourceopen', sourceopen);
          var video = document.getElementById('test-video');
          video.src = URL.createObjectURL(source);
      }

      function sourceopen(event)
      {
          var sourceBuffer = source.addSourceBuffer('video/mp4;codecs="avc1.4D4001,mp4a.40.2"');
          sourceBuffer.appendBuffer(request.response);
          sourceBuffer.addEventListener('updateend', updateend);
      }

      function updateend(event)
      {
          document.getElementById('test-video').play();
      }
  </script>
</head>
<body>
    <p>
        <video id="test-video" controls></video>
    </p>
    <p>
        <button onclick="playVideo()">Play video</button>
    </p>
</body>
</html>
